@use "../variables" as *;
@use "blocks/spg-action-bar.scss";
@use "blocks/spg-question.scss";
@use "blocks/spg-input.scss";
@use "blocks/spg-dropdown.scss";
@use "blocks/spg-tagbox.scss";
@use "blocks/spg-comment.scss";
@use "blocks/spg-panel.scss";
@use "blocks/spg-checkbox.scss";
@use "blocks/spg-matrixdynamic.scss";
@use "blocks/spg-table.scss";
@use "blocks/spg-question-group.scss";
@use "blocks/spg-color-editor.scss";
@use "blocks/spg-file-edit.scss";
@use "blocks/spg-link";
@use "blocks/spg-theme-builder.scss";
@use "blocks/spg-overriding.scss";
@use "blocks/spg-search-editor.scss";
@use "blocks/spg-buttongroup.scss";

.spg-root-modern {
  position: relative;
  width: 100%;
  border-inline-end: 1px solid transparent;
  background: var(--ctr-property-grid-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  box-sizing: border-box;
  height: 0;
  flex-grow: 1;
  /* disable library transition animations */
  --sjs-transition-duration: 0ms;
  @include disableLibraryAnimations;
}

.spg-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.spg-root-modern.spg-root--one-category {
  border-inline-end: unset;
  background-color: var(--ctr-property-grid-form-background-color, var(--sjs-layer-1-background-500, #ffffffff));

  .spg-page.spg-body__page {
    box-shadow: unset;
  }
}

.sv-popup--modal-popup {
  &.svc-property-editor .sv-popup__container {
    .sv-popup_shadow {
      background-color: transparent;
    }

    .sd-root-modern {
      background-color: transparent;
    }

    .sd-page {
      margin: 0;
      padding: 0;
    }

    .sv-components-column--expandable {
      min-width: calcSize(78);
    }
  }

  .sv-popup__footer {
    padding-bottom: 2px;
  }

  .sd-body,
  .sl-body {
    min-width: calcSize(78);
    padding: 0;
  }
}

.sv-popup.svc-property-editor .sd-root-modern {
  --sd-mobile-width: 0;
}

.svc-object-selector .sv-popup__container {
  margin-left: calcSize(1);
  margin-right: calcSize(1);
}

.svc-object-selector__content {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.spg-action-title-bar {
  margin-inline-end: var(--ctr-data-table-border-width, var(--sjs-stroke-x1));
  padding-inline-end: var(--ctr-caption-with-actions-actionbar-padding-right, calcSize(0.5));
}

.spg-body {
  width: 100%;
}

.spg-body--empty {
  padding: var(--sjs2-spacing-x500, 40px) var(--sjs2-spacing-x400, 32px);
  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;

  color: var(--sjs2-color-fg-basic-secondary, rgba(28, 27, 32, 0.6));
  text-align: center;

  /* sjs2/typography/default */
  font-family: var(--sjs2-typography-font-family-default, "Open Sans");
  font-size: var(--sjs2-typography-font-size-default, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--sjs2-typography-line-height-default, 24px); /* 150% */
}

.spg-title-toolbar--single-help-action {
  justify-content: flex-start;
  padding-left: calcSize(0.5);

  // flex-grow: 0;
  // margin-left: 0;
  // padding-left: 0;

  .spg-help-action {
    margin-inline-end: auto;

    .spg-action-button--icon {
      padding: var(--ctr-actionbar-button-padding-top-small-icon, var(--sjs-spacing-x05))
        var(--ctr-actionbar-button-padding-right-small-icon, var(--sjs-spacing-x05))
        var(--ctr-actionbar-button-padding-bottom-small-icon, var(--sjs-spacing-x05))
        var(--ctr-actionbar-button-padding-left-small-icon, var(--sjs-spacing-x05));
      opacity: var(--ctr-actionbar-button-opacity-muted, 0.35);
    }

    .spg-action-button--icon:focus,
    .spg-action-button--icon:hover {
      opacity: 1;
    }

    .spg-action-button:active {
      opacity: var(--ctr-actionbar-button-opacity-pressed, 0.5);
    }

    .spg-action-button__icon {
      width: var(--ctr-actionbar-button-icon-width-small, var(--sjs-font-size-x2));
      height: var(--ctr-actionbar-button-icon-height-small, var(--sjs-font-size-x2));
    }

    svg {
      fill: var(--ctr-actionbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
    }
  }
}